<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed bg-cover" th:style="'background-image: url(/img/tianjiabeijingtu.jpeg)'">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="adminCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">添加课程</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li>
                    <li class="breadcrumb-item"><a th:href="@{/class/selClass}">课程管理</a></li>
                    <li class="breadcrumb-item active">添加课程</li>
                </ol>

                <div class="card mb-4 table">
                    <form th:action="@{/class/addClass}" method="post" name="addForm"
                          onsubmit="return beforeSubmit(this)">
                        <table class="table table-hover">
                            <tr>
                                <td text-align="center">名称：</td>
                                <td><input type="text" class="form-control" placeholder="课程名称" name="className"></td>
                            </tr>
                            <tr>
                                <td text-align="center">开课时间：</td>
                                <!-- 新增：日期+时间选择器 -->
                                <td>
                                    <input type="datetime-local" class="form-control time-picker"
                                           name="classBegin" required>
                                    <small class="text-muted">请选择课程的日期和具体时间</small>
                                </td>
                            </tr>
                            <tr>
                                <td text-align="center">时长：</td>
                                <td><input type="text" class="form-control" placeholder="例如：1.5（单位：小时）" name="classTime"></td>
                            </tr>
                            <tr>
                                <td text-align="center">教练：</td>
                                <td>
                                    <!-- 自定义下拉框（带滚动条） -->
                                    <div class="custom-select" id="coachSelectContainer">
                                        <div class="select-header" onclick="toggleDropdown()">
                                            <span id="selectedCoach">请选择教练</span>
                                            <i class="fas fa-chevron-down"></i>
                                        </div>
                                        <ul class="select-options" id="coachOptions"></ul>
                                    </div>
                                    <input type="hidden" name="coach" id="coachValue">
                                </td>
                            </tr>
                        </table>
                        <div style="display:flex;justify-content:center;align-items:center;gap:20px;margin:30px 0;">
                            <input type="submit" class="btn btn-outline-success" value="添加">
                            <a th:href="@{/class/selClass}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </main>
        <footer th:replace="adminCommon::common-footer"></footer>
    </div>
</div>

<div th:include="adminCommon::common-scripts"></div>
<script type="text/javascript">
    // 教练下拉框逻辑（保持不变）
    let coaches = [];
    document.addEventListener('DOMContentLoaded', loadCoaches);

    function loadCoaches() {
        fetch('/employee/getCoaches')
            .then(response => response.json())
            .then(data => {
                coaches = data.coaches || [];
                renderCoachOptions();
            })
            .catch(error => {
                console.error('加载教练失败:', error);
                alert('加载教练列表失败');
            });
    }

    function renderCoachOptions() {
        const optionsList = document.getElementById('coachOptions');
        optionsList.innerHTML = '';
        coaches.forEach(coach => {
            const li = document.createElement('li');
            li.textContent = coach.employeeName;
            li.dataset.id = coach.id;
            li.dataset.name = coach.employeeName;
            li.onclick = () => selectCoach(li);
            optionsList.appendChild(li);
        });
    }

    function selectCoach(li) {
        document.getElementById('selectedCoach').textContent = li.dataset.name;
        document.getElementById('coachValue').value = li.dataset.name;
        toggleDropdown();
        document.querySelectorAll('#coachOptions li').forEach(item => item.classList.remove('selected'));
        li.classList.add('selected');
    }

    function toggleDropdown() {
        const container = document.getElementById('coachSelectContainer');
        const options = document.getElementById('coachOptions');
        container.classList.toggle('open');
        options.style.display = container.classList.contains('open') ? 'block' : 'none';
    }

    document.addEventListener('click', (e) => {
        const container = document.getElementById('coachSelectContainer');
        if (!container.contains(e.target)) {
            container.classList.remove('open');
            document.getElementById('coachOptions').style.display = 'none';
        }
    });

    // 表单验证（新增时间验证）
    function beforeSubmit(addForm) {
        if (!addForm.className.value.trim()) {
            alert("请输入课程名称！");
            return false;
        }
        if (!addForm.classBegin.value) { // 验证时间是否选择
            alert("请选择课程时间！");
            return false;
        }
        if (!addForm.classTime.value.trim()) {
            alert("请输入课程时长！");
            return false;
        }
        if (!document.getElementById('coachValue').value) {
            alert("请选择教练！");
            return false;
        }
        return true;
    }
</script>

<style>
    /* 教练下拉框样式（保持不变） */
    .custom-select {
        position: relative;
        width: 100%;
        font-size: 14px;
    }
    .select-header {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .select-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 300px;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background-color: white;
        overflow-y: auto;
        z-index: 100;
        display: none;
    }
    .select-options li {
        padding: 8px 12px;
        cursor: pointer;
    }
    .select-options li:hover { background-color: #f0f0f0; }
    .select-options li.selected { background-color: #007bff; color: white; }
    .select-options::-webkit-scrollbar { width: 6px; }
    .select-options::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }
    .custom-select.open .select-header i { transform: rotate(180deg); }

    /* 新增：时间选择器样式 */
    .time-picker {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }
    .time-picker:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }
    .text-muted {
        font-size: 12px;
        color: #6c757d;
        margin-top: 5px;
        display: block;
    }
</style>

</body>
</html>